{% extends 'index.html' %}
{% block page-content %}
<div id="page-wrapper">
    <div class="row">
         <div class="col-lg-12">
              <h1 class="page-header"><i class="fa  fa-list-alt"></i> 工单列表</h1>
         </div>
                <!-- /.col-lg-12 -->
         
    </div>
	<div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-database fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{totalOrder}}</div>
                                    <div>总部署工单</div>
                                </div>
                            </div>
                        </div>
                        <a href="#">
                            <div class="panel-footer">
                                <span class="pull-left">View Details</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-green">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-check-circle fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{doneOrder}}</div>
                                    <div>已完成</div>
                                </div>
                            </div>
                        </div>
                        <a href="#">
                            <div class="panel-footer">
                                <span class="pull-left">View Details</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-yellow">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa fa-editfa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{authOrder}}</div>
                                    <div>审核中</div>
                                </div>
                            </div>
                        </div>
                        <a href="#">
                            <div class="panel-footer">
                                <span class="pull-left">View Details</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="panel panel-red">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-xs-3">
                                    <i class="fa  fa-ban fa-5x"></i>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <div class="huge">{{rejectOrder}}</div>
                                    <div>已撤销</div>
                                </div>
                            </div>
                        </div>
                        <a href="#">
                            <div class="panel-footer">
                                <span class="pull-left">View Details</span>
                                <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                <div class="clearfix"></div>
                            </div>
                        </a>
                    </div>
                </div>
     </div>    
<!--      <div class="row"> -->
<!--          <div class="col-lg-6"> -->
<!--               <div class="panel panel-default"> -->
<!--                     <div class="panel-heading"> -->
<!--                            	<i class="fa fa-github-alt"></i> 项目部署统计   -->
<!--                      </div> -->
<!--                         /.panel-heading -->
<!--                      <div class="panel-body"> -->
<!--                      <div class="flot-chart"> -->
<!--                           <div class="flot-chart-content" id="deploy_prject"></div> -->
<!--                           </div> -->
<!--                      </div> -->
<!--                         /.panel-body -->
<!--               </div> -->
<!--                     /.panel -->
<!--          </div>     -->
<!--                 <div class="col-lg-6"> -->
<!--                     <div class="panel panel-default"> -->
<!--                         <div class="panel-heading"> -->
<!--                            	<i class="fa fa-group"></i> 用户部署统计 -->
<!--                         </div> -->
<!--                         /.panel-heading -->
<!--                         <div class="panel-body"> -->
<!--                             <div id="deploy_number"></div> -->
<!--                         </div> -->
<!--                         /.panel-body -->
<!--                     </div> -->
<!--                     /.panel -->
<!--                 </div>  -->
<!--      </div>       -->
    <div class="row">
         <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                         	<i class="fa fa-database"></i>工单列表明细
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="orderTableList">
                                <thead>
                                    <tr>
                                    	<th class="text-center">工单状态</th>
                                    	<th class="text-center">项目</th>
                                    	<th class="text-center">版本号</th>                                    	
                                    	<th class="text-center">工单主题</th>
                                        <th class="text-center">申请人</th>
                                        <th class="text-center">创建时间</th>
                                        <th class="text-center">工单状态</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                	{% for ds in orderList %}
                                		<tr class="odd gradeX">
                                			<td class="text-center">
								         	{% if ds.order_level == 1 %}
								         		<button  type="button" class="btn btn-outline btn-default disabled">非紧急</button>
								         	{% else %}
								         		<button  type="button" class="btn btn-outline btn-warning disabled">紧急</button>
								         	{% endif %} 
								         	</td> 
                                			<td class="text-center">
                                				{{ds.order_project.project_name}} 
                                			</td>
                                			<td class="text-center">
                                				{% if ds.order_comid %}
                                					<a href="/deploy_order/status/{{ ds.id }}">{{ds.order_comid | slice:"7"}}</a>
                                				{% elif ds.order_tag %}
                                					<a href="/deploy_order/status/{{ ds.id }}">{{ ds.order_tag }}</a>
                                				{% endif %} 
                                			</td>                                											         	                              			
                                			<td class="text-center">{{ds.order_subject}} </td>
                                			<td class="text-center">
												{{ds.order_user}}
                                			</td>
											<td class="text-center">{{ ds.create_time|date:"Y/m/d H:i  " }}</td>                                			
                                			<td class="text-center">
									         	{% if ds.order_status == 0 %}
									         		<button  type="button" class="btn btn-outline btn-info">已通过</button>								         	
									         	{% elif ds.order_status == 1 %}
									         		<button  type="button" class="btn btn-outline btn-danger disabled"><del>已撤销</del></button>
									         		
									         	{% elif ds.order_status == 2 %}
									         		<button  type="button" class="btn btn-outline btn-warning">审核中</button>
		
									         	{% elif ds.order_status == 3 %}
									         		<button  type="button" class="btn btn-outline btn-success disabled" >已部署</button>
									         	{% endif %}	                              			
                                			</td>
									        <td class="text-center">
												<div class="btn-group">
												   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
												   	   <font class="glyphicon glyphicon glyphicon-edit"></font>
												       <span class="caret"></span>
												   </button>										   
												   <ul class="dropdown-menu" role="menu">
												   	
												   	 {% if ds.order_status == 2 or ds.order_status == 0 %}	
												   	 	<!-- 如果有写入工单权限表权限，并且状态是审核状态，就返回授权跟撤销以及详情按钮 -->
	 												    {% if perms.OpsManage.add_project_order and ds.order_status == 2 %}
													      <li>
													      	<a href="javascript:" onclick='updateOrderStatus(this,{{ ds.id }},"auth",0)'>授权</a>
													      </li>		
													      <li><a href="javascript:" onclick="updateOrderStatus(this,{{ ds.id }},'disable',1)">撤销</a></li>									      
													      {% endif %}	
													     <!-- 如果工单已经审核通过，并且有改变工单状态权限 -->										   	 							   	 											   	 	
												   	 	{% if ds.order_status == 0 and perms.OpsManage.change_project_order %}											   	 	
													      		<li><a href="/deploy_order/status/{{ ds.id }}">部署</a></li>
													      		<li><a href="javascript:" onclick="updateOrderStatus(this,{{ ds.id }},'disable',1)">撤销</a></li>
													      		<li><a href="javascript:" onclick="updateOrderStatus(this,{{ ds.id }},'finish',3)">完成</a></li>
													      		<li><a href="/deploy_order/status/{{ ds.id }}">详情</a></li>
													      {% else %}
													      		<li><a href="/deploy_order/status/{{ ds.id }}">详情</a></li>
													      		
													    {% endif %}   
													    
													    {% else %}
													    	<!-- 如果工单状态不是审核或者通过状态就返回详情按钮-->
													    	<li><a href="/deploy_order/status/{{ ds.id }}">详情</a></li>
													    {% if perms.OpsManage.change_project_order %}
													    	<li><a href="/deploy_order/rollback/{{ ds.id }}">回滚</a></li>
													    {% endif %}
												      {% endif %}
												   </ul>
												</div>
									        </td>                                 			
                                		</tr>
                                	{% endfor %}
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->                            
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
    </div>  
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#orderTableList').DataTable({
            responsive: true
        });
    });	
    
	function updateOrderStatus(obj,id,model,status){
		if (model == 'auth' || model == 'finish' ){
			if (model == 'auth'){
				var txt=  "是否确认授权？";
				var title = "部署工单授权";
			}
			else if (model == 'finish'){
				var txt=  "是否确认完成？";
				var title = "部署工单完成";				
			};
			var option = {
				title: title,
				btn: parseInt("0011",2),
				onOk: function(){
					$.ajax({
						  type: 'POST',
						  url: '/deploy_order/',
						  data: {
							  "id":id,
							  "model":model,
							  "order_status":status
						  },
					      success:function(response){			            
				                if (response["code"]=="200"){ 
				                	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
				                }
					        	else{
					        		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
					        	}			                
						},
			            error:function(response){
			            	window.wxc.xcConfirm("请求数据错误！", window.wxc.xcConfirm.typeEnum.error);
			            },							  
						});
				},
				onCancel:function(){	
				},
				onClose:function(){
				}
			}
			window.wxc.xcConfirm(txt, "custom", option);				
		} 
		else if (model == 'disable'){
			window.wxc.xcConfirm("撤销原因：", window.wxc.xcConfirm.typeEnum.input,{
				onOk:function(result){
					if (result.length == 0){
						/* 如果没有输入字符串则直接退出 */
						return;
					};
					$.ajax({
						  type: 'POST',
						  url: '/deploy_order/',
						  data: {
							  "model":model,
							  'order_cancel':result,
							  'id':id,
							  "order_status":status
						  },
					      success:function(response){	
				                if (response["code"]=="200"){ 
				                	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
				                }
					        	else{
					        		window.wxc.xcConfirm("撤销失败：" + response["msg"], window.wxc.xcConfirm.typeEnum.error);
					        	};	
				                btnObj.removeAttr('disabled');
						},
			            error:function(response){
			            	btnObj.removeAttr('disabled');
			            	window.wxc.xcConfirm("服务器响应错误，撤销失败", window.wxc.xcConfirm.typeEnum.error);
			            },							  
						});
					
				}
			})			
		}
   }


	//Flot Pie Chart
// 	$(function() {
// 	    Morris.Donut({
// 	        element: 'deploy_prject',
// 	        data: [
// 	               {% for ds in deploy_project %}
// 	               		{
// 		         			label: "{{ds.order_project}}",
// 	                   		value: {{ ds.dcount }}
// 	               		},
// 	               {% endfor %}
// 	               ],
// 	        resize: true
// 	    });
	    
// 	});
// 	$(function() {
// 	    Morris.Donut({
// 	        element: 'deploy_number',
// 	        data: [
// 	               {% for ds in deploy_nmuber %}
// 	               		{
// 		         			label: "{{ds.order_user}}",
// 	                   		value: {{ ds.dcount }}
// 	               		},
// 	               {% endfor %}
// 	               ],
// 	        resize: true
// 	    });
	    
// 	});
	
	
</script>
{% endblock %}